import React, { useEffect, useState } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native';
import Payment from '@/components/common/pay/Payment';
import { useRouter } from 'expo-router';
import GiftModal from '@/components/common/vip/giftmodal';
import GiftDetailModal from '@/components/common/vip/giftdetailmodal';
import * as SecureStore from 'expo-secure-store'

export default function Diamond() {
    const [giftModalVisible, setGiftModalVisible] = useState(false);
    const [giftDetailModalVisible, setGiftDetailModalVisible] = useState(false);
    const [selectedGift, setSelectedGift] = useState(null);
    const router = useRouter();
    const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
    const [diamondCount, setdiamondCount] = useState<number | null>(0);
    useEffect(() => {
        const loaddia = async () => {
            try {
                const diamondCount = await SecureStore.getItemAsync('diamondCount');
                if (diamondCount) {
                    setdiamondCount(parseInt(diamondCount));
                }
            } catch (error) {
                console.error('Error loading diamond count:', error);
            }
        }
        loaddia();
    }, [diamondCount])


    const rechargeOptions = [
        {
            id: 0,
            content: "钻石",
            description: "290钻石",
            price: 38,
            originalPrice: 58,
            duration: 290,
        },
        {
            id: 1,
            content: "钻石",
            description: "490钻石",
            price: 60,
            originalPrice: 78,
            duration: 490,
        },
        {
            id: 2,
            content: "钻石",
            description: "750钻石",
            price: 98,
            originalPrice: 128,
            duration: 750,
        },
        {
            id: 3,
            content: "钻石",
            description: "1500钻石",
            price: 198,
            originalPrice: 278,
            duration: 1500,
        },
        {
            id: 4,
            content: "钻石",
            description: "3000钻石",
            price: 388,
            originalPrice: 548,
            duration: 3000,
        },
        {
            id: 5,
            content: "钻石",
            description: "9200钻石",
            price: 1198,
            originalPrice: 1598,
            duration: 9200,
        },
    ];

    const handlePress = (index: number) => {
        setSelectedIndex(index);
    };

    const handleGiftSelect = (gift) => {
        setSelectedGift(gift);
        setGiftDetailModalVisible(true);
    };

    const handleReward = (gift) => {
        console.log('打赏了礼物:', gift.name);
        // 这里可以添加实际的打赏逻辑
    };


    const handlePurchase = () => {
        if (selectedIndex !== null) {
            const selectedOption = rechargeOptions[selectedIndex];
            router.push({
                pathname: '/my/paymoney',
                params: {
                    content: selectedOption.content,
                    description: selectedOption.duration,
                    price: selectedOption.price,
                    originalPrice: selectedOption.originalPrice,
                    duration: selectedOption.duration,
                }
            });
        }
    };


    return (
        <View style={styles.all}>
            <View style={styles.header}>
                <View style={styles.headerLeft}>
                    <TouchableOpacity onPress={() => router.back()}>
                        <Image source={require('../../assets/images/backwhite.png')} style={styles.headerImg} />
                    </TouchableOpacity>
                    <Text style={styles.title}>充值</Text>
                    <TouchableOpacity onPress={() => router.push('/my/rechargehistory')}>
                        <Text style={styles.headerText}>充值记录</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.headerRight}>
                    <TouchableOpacity onPress={() => {
                        router.push('/my/consumer');
                    }}>
                        <Text style={styles.headerRightText}>当前余额</Text>
                    </TouchableOpacity>

                    <View style={styles.headerRightViewLeft}>
                        <Image source={require('../../assets/images/diamond.png')} style={styles.headerRightViewLeftImg} />
                        <Text style={styles.headerRightViewLeftText}>{diamondCount}</Text>
                    </View>
                </View>
            </View>

            <View style={styles.main}>
                <View style={styles.container}>
                    {rechargeOptions.map((option) => (
                        <TouchableOpacity key={option.id} onPress={() => handlePress(option.id)}>
                            <Payment
                                style={[styles.card, selectedIndex === option.id && styles.selectedCard]}
                                content="钻"
                                description={
                                    <View style={styles.priceContainer}>
                                        <Text style={styles.price}>{option.duration}</Text>
                                        <Image source={require('../../assets/images/diamond.png')} style={styles.diamondImg} />
                                    </View>
                                }
                                price={option.price}
                                originalPrice={option.originalPrice}
                                isSelected={selectedIndex === option.id}
                            />
                        </TouchableOpacity>
                    ))}
                </View>

                <View style={styles.buttonContainer}>
                    <TouchableOpacity style={styles.button} onPress={handlePurchase}>
                        <Text>立即支付</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.warningContainer}>
                    <Image source={require('../../assets/images/waring.png')} style={styles.warningIcon} />
                    <Text style={styles.warningText}>有问题请联系24h在线客服</Text>
                </View>
            </View>

            <View style={styles.container}>
                <TouchableOpacity onPress={() => setGiftModalVisible(true)}>
                    <Text style={styles.openButton}>选择礼物</Text>
                </TouchableOpacity>

                {/* 礼物选择模态框 */}
                <GiftModal
                    visible={giftModalVisible}
                    onClose={() => setGiftModalVisible(false)}
                    onGiftSelect={handleGiftSelect}
                />

                {/* 礼物详情模态框 */}
                <GiftDetailModal
                    visible={giftDetailModalVisible}
                    gift={selectedGift}
                    onClose={() => setGiftDetailModalVisible(false)}
                    onReward={handleReward}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    openButton: {
        fontSize: 12,
        color: 'blue',
    },
    all: {
        backgroundColor: 'rgb(249, 249, 249)',
        height: '100%',
    },
    headerRightViewLeftText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
    headerRightText: {
        color: 'white',
        fontSize: 12,
    },
    headerRightViewLeft: {
        width: '88%',
        alignContent: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 10,
    },
    headerRightViewLeftImg: {
        width: 25,
        height: 25,
        backgroundColor: 'white',
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 3,
        borderColor: 'white',
    },
    headerRight: {
        width: '100%',
        marginLeft: 20,
        marginTop: 20,
    },
    price: {
        marginRight: 1,
        fontSize: 12,
        marginLeft: 15,
    },
    priceContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: -40,
    },
    diamondImg: {
        width: 20,
        height: 20,
    },
    headerText: {
        color: 'white',
        marginRight: 10,
        fontSize: 14,
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
        color: 'white',
        marginLeft: 30,
    },
    headerLeft: {
        marginTop: 12,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    headerImg: {
        width: 20,
        height: 15,
        marginLeft: 20,
    },
    header: {
        width: '100%',
        height: 150,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        backgroundColor: 'rgb(104, 202, 252)',
    },
    warningContainer: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
    },
    warningText: {
        fontSize: 11,
    },
    warningIcon: {
        width: 15,
        height: 15,
        marginRight: 5,
    },
    container: {
        marginTop: 20,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        flexWrap: 'wrap',
    },
    card: {
        marginBottom: 20,
        width: 105,
        borderWidth: 1,
        borderColor: '#ccc', // 默认边框颜色
    },
    selectedCard: {
        borderColor: '#00a676', // 选中时的边框颜色
    },
    main: {
        backgroundColor: '#fff',
        borderRadius: 10,
        margin: 10,
        shadowColor: '#000',
        height: 460,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        alignContent: 'center',
        marginTop: -20,
    },
    buttonContainer: {
        alignItems: 'center',
    },
    button: {
        backgroundColor: 'rgb(104, 202, 252)',
        padding: 10,
        borderRadius: 20,
        alignItems: 'center',
        marginTop: 30,
        width: 200,
    }
});










